<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 程序介绍 -->
<template>
    <div class="program_introduce_container" :style="{ 'background-color': background }">
        <p class="title" :class="{'rtl-l text-r': $rtl}" :style="{ 'color': titleColor }">{{ textObj.title }}</p>
        <p
            class="content"
            :class="{'rtl-l text-r': $rtl}"
            v-for="(item, i) in textObj.tips"
            :key="i"
            :style="{ 'color': labelColor }"
        >{{ item.value }}</p>
        <div class="update_box" v-if="textObj.content">
            <p class="update_box_title" :class="{'rtl-l text-r': $rtl}" :style="{ 'color': titleColor }">更新内容</p>
            <p
                class="content"
                :class="{'rtl-l text-r': $rtl}"
                v-for="(val, index) in textObj.content"
                :key="index"
                :style="{ 'color': labelColor }"
            >{{ val.value }}</p>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        textObj: Object
    },
    data(){
        return {
            background: window.isDark ? 'rgba(255,255,255,0.1)' : '#FFFFFF',
            titleColor: window.isDark ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.9)',
            labelColor: window.isDark ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)',
        }
    }
}
</script>
<style scoped>
    .program_introduce_container{
        background: #fff;
        border-radius: 1.6rem;
        margin-top: 1.2rem;
        margin-bottom: 10rem;
        padding: 1.2rem;
    }

    .title{
        opacity: 0.9;
        font-family: HWtext-65ST;
        font-size: 1.6rem;
        margin-bottom: .8rem;
    }

    .content{
        word-break: break-word;
        display: inline-block;
        font-size: 1.4rem;
    }

    .update_box{
        display: flex;
        flex-direction: column;
        margin-top: 1.6rem;
        font-size: 1.4rem;
    }
</style>